<template>
  <div>
    <div class="AddHeader">
      <div class="AddHeaderLeft">发货通知单</div>
      <div class="AddHeaderRight">
        <div>
          <el-button type="primary" v-show="delState" @click="save"
            >保存</el-button
          >
          <el-button v-show="delState" @click="cancle">取消</el-button>
          <el-button type="primary" v-show="!delState" @click="add"
            >新增</el-button
          >
          <el-button v-show="!delState" plain @click="edit">编辑</el-button>
          <el-button
            type="success"
            :disabled="id == 2 && examine == true ? false : true"
            @click="examineBtn"
            >审核</el-button
          >
          <el-button
            type="info"
            @click="disExamineBtn"
            plain
            :disabled="id == 2 && disExamine == false ? false : true"
            >反审核</el-button
          >
          <el-button
            icon="el-icon-printer"
            type="success"
            v-show="!delState"
            plain
            >打印</el-button
          >
          <el-dropdown v-show="!delState">
            <el-button type="primary">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>挂起</el-dropdown-item>
              <el-dropdown-item>关闭</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="retract" @click="hide">收起</div>
      </div>
    </div>
    <!-- 中间内容 -->
    <div class="middleContent" v-if="state">
      <div class="listBox">
        <div class="inputBox">
          <span>单据编码：</span>
          <div class="textBox">
            <el-input placeholder="" v-model="documentInput" :disabled="true">
            </el-input>
          </div>
        </div>
        <div class="inputBox">
          <span>单据日期：</span>
          <div class="textBox">
            <el-date-picker
              v-model="date"
              type="date"
              placeholder="选择日期"
              :disabled="allstate"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="inputBox">
          <span>单据状态：</span>
          <div class="textBox">
            <el-input v-model="documentStatus" :disabled="true"> </el-input>
          </div>
        </div>
        <div class="inputBox">
          <span>业务状态：</span>
          <div class="textBox">
            <el-select v-model="businesStatus" disabled placeholder="正常">
              <el-option
                v-for="item in StatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="listBox">
        <div class="inputBox">
          <span>业务类型：</span>
          <div class="textBox">
            <el-select
              v-model="businessType"
              :disabled="allstate"
              placeholder="普通发货"
            >
              <el-option
                v-for="item in BusinessOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="inputBox">
          <span>操作员：</span>
          <div class="textBox">
            <el-input placeholder="njrsun" v-model="operator" :disabled="true">
            </el-input>
          </div>
        </div>
        <div class="inputBox">
          <span>审核员：</span>
          <div class="textBox">
            <el-input placeholder="" v-model="Auditor" :disabled="true">
            </el-input>
          </div>
        </div>
        <div class="inputBox">
          <span>审核日期：</span>
          <div class="textBox">
            <el-date-picker
              v-model="auditDate"
              type="date"
              placeholder=""
              :disabled="true"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="listBox">
        <div class="inputBox">
          <span>仓库：</span>
          <div class="textBox">
            <el-select
              v-model="store"
              :disabled="allstate"
              placeholder="成品仓"
            >
              <el-option
                v-for="item in storeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="inputBox">
          <span>客户名称：</span>
          <div class="textBox">
            <el-input placeholder="" :disabled="allstate" v-model="customer">
            </el-input>
          </div>
        </div>
        <div class="inputBox">
          <span>进仓编号：</span>
          <div class="textBox">
            <el-input placeholder="" :disabled="allstate" v-model="entryNumber">
            </el-input>
          </div>
        </div>
        <div class="inputBox">
          <span>交付日期：</span>
          <div class="textBox">
            <el-date-picker
              v-model="deliveryDate"
              type="date"
              :disabled="allstate"
              placeholder="请选择日期"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="listBox">
        <div class="inputBox">
          <span>收货人：</span>
          <div class="textBox">
            <el-input placeholder="" v-model="consignee" :disabled="allstate">
            </el-input>
          </div>
        </div>
        <div class="inputBox">
          <span>电话：</span>
          <div class="textBox">
            <el-input placeholder="" v-model="tel" :disabled="allstate">
            </el-input>
          </div>
        </div>
        <div class="inputBox">
          <span>地址：</span>
          <div class="textBox">
            <el-input placeholder="" v-model="address" :disabled="allstate">
            </el-input>
          </div>
        </div>
        <div class="inputBox">
          <span>备注信息：</span>
          <div class="textBox">
            <el-input
              type="textarea"
              :rows="1"
              placeholder=""
              v-model="notes"
              :disabled="allstate"
            >
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <!-- 物料信息 -->
    <div class="materailBox">
      <div class="materailHead">
        <div class="name">物料信息</div>
        <div>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            @click="introduce"
            >引入</el-button
          >
        </div>
      </div>
      <div class="tab">
        <MaterialTable
          :MaterialTableData="MaterialTableData"
          :MaterialHeadData="MaterialHeadData"
          :selectList="selectList"
        >
          <template v-slot:operation="{ row }">
            <div>
              <span
                class="delete"
                v-show="delState"
                @click="deleteMaterial(row.Serial)"
                >删除</span
              >
            </div>
          </template></MaterialTable
        >
      </div>
    </div>
    <!-- 弹窗 -->
    <div class="dialog">
      <el-dialog title="销售发货" :visible.sync="dialogVisible" width="60%">
        <div>
          <div class="dialogBox">
            <div class="dialogLeft">
              <div class="saleList">
                <span>销售单号</span>
                <el-input
                  v-model="SalesNumber"
                  placeholder="请输入内容"
                ></el-input>
              </div>
              <div class="customerList">
                <span>客户名称</span>
                <el-input
                  v-model="customerName"
                  placeholder="请输入内容"
                ></el-input>
              </div>
              <div>
                <el-button icon="el-icon-search" type="primary">搜索</el-button>
              </div>
            </div>
            <div class="right">
              <el-button icon="el-icon-menu" type="primary" plain
                >查询所有</el-button
              >
            </div>
          </div>
        </div>
        <div class="tabBox">
          <ImportTable
            :saleTableData="saleTableData"
            :saleHeadData="saleHeadData"
            @dialogVisible="close"
            @selectList="getList"
          >
          </ImportTable>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "AddShipment",
  data() {
    return {
      allstate: false,
      id: 0,
      examine: true,
      disExamine: true,
      disabled: true,
      selectList: [],
      customerName: "",
      SalesNumber: "",
      dialogVisible: false,
      state: true,
      delState: true,
      documentInput: "",
      date: "",
      documentStatus: "",
      businesStatus: "",
      businessType: "",
      operator: "",
      Auditor: "",
      auditDate: "",
      store: "",
      customer: "",
      entryNumber: "",
      deliveryDate: "",
      consignee: "",
      tel: "",
      address: "",
      notes: "",
      business: "",
      store: "",
      BusinessOptions: [
        {
          value: "1",
          label: "普通发货",
        },
        {
          value: "2",
          label: "直运发货",
        },
      ],
      StatusOptions: [
        {
          value: "1",
          label: "普通发货",
        },
        {
          value: "2",
          label: "直运发货",
        },
      ],
      storeOptions: [
        {
          value: "1",
          label: "成品仓",
        },
      ],
      MaterialHeadData: [
        {
          label: "序号",
          prop: "Serial",
          width: "80",
        },
        {
          label: "销售订单号",
          prop: "SalesOrder",
          width: "120",
        },
        {
          label: "物料编码",
          prop: "materialCode",
          width: "120",
        },
        {
          label: "物料名称",
          prop: "materialName",
          width: "220",
        },
        {
          label: "型号规格",
          prop: "modelSpecifications",
          width: "120",
        },
        {
          label: "主计量",
          prop: "mainMeasurement",
          width: "140",
        },
        {
          label: "数量",
          prop: "number",
          width: "140",
        },
        {
          label: "包装件数",
          prop: "packagesNumber",
          width: "140",
        },
        {
          label: "备注",
          prop: "notes",
          width: "400",
        },
        {
          label: "操作",
          prop: "operation",
          slot: true,
        },
      ],
      MaterialTableData: [],
      NewMaterialTableData: [],
      saleHeadData: [
        {
          label: "销售订单号",
          prop: "SalesOrder",
          width: "240",
        },
        {
          label: "客户",
          prop: "customer",
          width: "240",
        },
        {
          label: "物料编码",
          prop: "materialCode",
          width: "130",
        },
        {
          label: "物料名称",
          prop: "materialName",
          width: "100",
        },
        {
          label: "主计量",
          prop: "mainMeasurement",
          width: "130",
        },
        {
          label: "订单数量",
          prop: "orderQuantity",
          width: "130",
        },
        {
          label: "已发数量",
          prop: "issuedQuantity",
          width: "130",
        },
        {
          label: "未发数量",
          prop: "undeliveredQuantity",
          width: "130",
        },
      ],
      saleTableData: [
        {
          SalesOrder: "XSDD000128",
          customer: "北京注意力文化发展有限公司",
          materialCode: "0101000003",
          materialName: "新测试机",
          mainMeasurement: "台",
          orderQuantity: 5.0,
          issuedQuantity: 0.0,
          undeliveredQuantity: 5.0,
          modelSpecifications: "ZY型",
        },
        {
          SalesOrder: "XSDD000128",
          customer: "北京注意力文化发展有限公司",
          materialCode: "0101000003",
          materialName: "新测试机",
          mainMeasurement: "台",
          orderQuantity: 5.0,
          issuedQuantity: 0.0,
          undeliveredQuantity: 5.0,
          modelSpecifications: "ZY型",
        },
        {
          SalesOrder: "XSDD000128",
          customer: "东莞市星瀚商贸有限公司",
          materialCode: "0101000003",
          materialName: "新测试机",
          mainMeasurement: "台",
          orderQuantity: 5.0,
          issuedQuantity: 0.0,
          undeliveredQuantity: 5.0,
          modelSpecifications: "ZY型",
        },
        {
          SalesOrder: "XSDD000128",
          customer: "厦门市黑眼睛服饰有限公司",
          materialCode: "0101000003",
          materialName: "新测试机",
          mainMeasurement: "台",
          orderQuantity: 10.0,
          issuedQuantity: 0.0,
          undeliveredQuantity: 10.0,
          modelSpecifications: "ZY型",
        },
      ],
    };
  },
  created() {
    console.log(this.$store.state.id);
    // this.headData = headData.AddoutsourcingHeadData;
    console.log(this.$route.params.id);
    this.id = this.$route.params.id;
    this.customer = this.$route.params.rowData.SalesCustomers;
    if (this.id == 0) {
      this.$store.commit("setId", this.id);
      this.allstate = true;
      this.MaterialTableData.push({
        Serial: "1",
        SalesOrder: this.$route.params.rowData.SalesOrder,
        materialCode: this.$route.params.rowData.materialCode,
        materialName: this.$route.params.rowData.materialName,
        modelSpecifications: this.$route.params.rowData.invAttribute,
        mainMeasurement: this.$route.params.rowData.unitName,
        number: this.$route.params.rowData.ShipmentQuantity,
        packagesNumber: this.$route.params.rowData.Number,
        notes: "",
      });
    } else if (this.id == 2) {
      console.log("初始数组内容：***************");
      console.log(this.$store.state.tableData);
      this.MaterialTableData.push({
        Serial: "",
        SalesOrder: this.$route.params.rowData.SalesOrder,
        materialCode: this.$route.params.rowData.materialCode,
        materialName: this.$route.params.rowData.materialName,
        modelSpecifications: this.$route.params.rowData.invAttribute,
        mainMeasurement: this.$route.params.rowData.unitName,
        number: this.$route.params.rowData.ShipmentQuantity,
        packagesNumber: this.$route.params.rowData.Number,
        notes: "",
      });
    }
  },
  mounted() {
    console.log(this.$route.params);
    let time = new Date();
    let year = time.getFullYear();
    let month = time.getMonth() + 1;
    let day = time.getDate();
    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    let getTime = year + "-" + month + "-" + day;
    this.date = this.id ? getTime : this.$route.params.rowData.DocumentDate;
    // this.allstate = true;
    this.customer = this.$route.params.rowData.SalesCustomers;
    this.documentStatus = this.$route.params.rowData.DocumentStatus[0].label;
    this.deliveryDate = this.$route.params.rowData.period;
    this.documentInput = this.$route.params.rowData.DocumentCode;
    this.delState = false;
  },
  methods: {
    cancle() {
      this.$router.push({
        name: "delivery",
      });
    },
    disExamineBtn() {
      this.$confirm("确定审核选中入库单?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.documentStatus == "审核") {
          this.disExamine = true;
          this.documentStatus = "退回";
          this.$message({
            type: "success",
            message: "反审核成功!",
          });
        } else {
          this.$message({
            type: "error",
            message: "单据必须为审核状态",
          });
        }
      });
    },
    examineBtn() {
      if (this.documentStatus == "开立") {
        this.documentStatus = "审核";
        this.$message({
          message: "审核成功",
          type: "success",
        });
        this.examine = false;
        this.disExamine = false;
      } else {
        this.$message({
          message: "单据必须为开立状态",
          type: "error",
        });
      }
    },
    close(date) {
      this.dialogVisible = date;
    },
    getList(date) {
      this.selectList = date;
      console.log(this.selectList);
      this.customer = this.selectList[0].customer;
      this.MaterialTableData = [];
      this.MaterialTableData.push({
        Serial: "",
        SalesOrder: this.selectList[0].SalesOrder,
        materialCode: this.selectList[0].materialCode,
        materialName: this.selectList[0].materialName,
        modelSpecifications: this.selectList[0].modelSpecifications,
        mainMeasurement: this.selectList[0].mainMeasurement,
        number: this.selectList[0].orderQuantity,
        packagesNumber: this.selectList[0].undeliveredQuantity,
        notes: "",
      });
    },
    hide() {
      let _self = this;
      _self.state = !_self.state;
    },
    introduce() {
      let _self = this;
      _self.dialogVisible = true;
    },
    deleteMaterial(Serial) {
      console.log(Serial);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          for (let i in this.MaterialTableData) {
            if (this.MaterialTableData[i].Serial == Serial) {
              this.MaterialTableData.splice(i, 1);
            }
          }
          console.log("jj");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    save() {
      if (this.MaterialTableData.length == 0) {
        this.$message({
          message: "物料信息不能为空",
          type: "error",
        });
      } else {
        this.delState = !this.delState;
        this.$message({
          message: "新增成功",
          type: "success",
        });
        this.examine = false;
        this.NewMaterialTableData = this.MaterialTableData;
        console.log(this.NewMaterialTableData);
      }
    },
    edit() {
      this.delState = !this.delState;
      this.allstate = false;
    },
    add() {
      this.MaterialTableData = [];
      this.customer = "";
      this.delState = !this.delState;
      this.allstate = false;
      this.$emit("chage", "新增发货单");
      this.$router.push({
        name: "AddShipment",
        params: {
          rowData: row,
          id: 2,
        },
      });
    },
  },
  components: {
    ImportTable: () => import("@/Components/ImportTable"),
    MaterialTable: () => import("@/Components/MaterialTable"),
  },
};
</script>
<style scoped>
.AddHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid lightgray;
  padding-bottom: 20px;
}
.AddHeaderLeft {
  font-size: 22px;
}
.AddHeaderRight {
  display: flex;
  align-items: center;
}
.retract {
  margin-left: 10px;
  color: rgb(43, 65, 189);
}
.inputBox {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.middleContent {
  display: flex;
  /* justify-content: space-between; */
}
.listBox {
  margin-right: 40px;
}
.listBox .inputBox span {
  width: 80px;
  font-size: 14px;
}
.listBox .inputBox .textBox {
  width: 300px;
}
.materailBox {
  margin-top: 10px;
}
.materailHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 80px;
  border-bottom: 1px solid lightgray;
}
.materailHead .name {
  font-size: 22px;
}
.saleList,
.customerList {
  display: flex;
  align-items: center;
}
.dialogBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dialogBox .saleList span {
  width: 100px;
  font-size: 16px;
}
.dialogBox .customerList span {
  width: 100px;
  font-size: 16px;
}
.dialogLeft {
  display: flex;
}
.tabBox {
  margin-top: 20px;
}
.tab {
  width: 100%;
}
.delete {
  color: #ff4984;
  cursor: pointer;
}
</style>
<style>
.textBox .el-input--prefix .el-input__inner,
.textBox .el-select:hover .el-input__inner,
.textBox .el-select .el-input.is-disabled .el-input__inner,
.textBox .el-input--suffix .el-input__inner {
  width: 300px;
}
.saleList .el-input__inner {
  width: 150px;
}
.customerList .el-input__inner {
  width: 300px;
}
</style>